<!--<template>-->
<!--  <div>-->
<!--    &lt;!&ndash;    <el-upload&ndash;&gt;-->
<!--    &lt;!&ndash;      :action="uploadUrl"&ndash;&gt;-->
<!--    &lt;!&ndash;      :before-upload="handleBeforeUpload"&ndash;&gt;-->
<!--    &lt;!&ndash;      :on-success="handleUploadSuccess"&ndash;&gt;-->
<!--    &lt;!&ndash;      :on-error="handleUploadError"&ndash;&gt;-->
<!--    &lt;!&ndash;      name="file"&ndash;&gt;-->
<!--    &lt;!&ndash;      :show-file-list="false"&ndash;&gt;-->
<!--    &lt;!&ndash;      :headers="headers"&ndash;&gt;-->
<!--    &lt;!&ndash;      style="display: none"&ndash;&gt;-->
<!--    &lt;!&ndash;      ref="upload"&ndash;&gt;-->
<!--    &lt;!&ndash;      v-if="this.type == 'url'"&ndash;&gt;-->
<!--    &lt;!&ndash;    >&ndash;&gt;-->
<!--    &lt;!&ndash;    </el-upload>&ndash;&gt;-->
<!--    &lt;!&ndash;    <div class="editor" ref="editor" :style="styles"></div>&ndash;&gt;-->
<!--    <vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {ref} from 'vue';-->

<!--export default {-->
<!--  name: "UEditor",-->
<!--  data() {-->
<!--    return {-->
<!--      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址-->
<!--      headers: {-->
<!--        Authorization: "Bearer " + getToken()-->
<!--      },-->
<!--      Quill: null,-->
<!--      currentValue: "",-->
<!--      options: {-->
<!--        theme: "snow",-->
<!--        bounds: document.body,-->
<!--        debug: "warn",-->
<!--        modules: {-->
<!--          // 工具栏配置-->
<!--          toolbar: [-->
<!--            ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线-->
<!--            ["blockquote", "code-block"],                    // 引用  代码块-->
<!--            [{list: "ordered"}, {list: "bullet"}],       // 有序、无序列表-->
<!--            [{indent: "-1"}, {indent: "+1"}],            // 缩进-->
<!--            [{size: ["small", false, "large", "huge"]}],   // 字体大小-->
<!--            [{header: [1, 2, 3, 4, 5, 6, false]}],         // 标题-->
<!--            [{color: []}, {background: []}],             // 字体颜色、字体背景颜色-->
<!--            [{align: []}],                                 // 对齐方式-->
<!--            ["clean"],                                       // 清除文本格式-->
<!--            ["link", "image", "video"]                       // 链接、图片、视频-->
<!--          ],-->
<!--        },-->
<!--        placeholder: "请输入内容",-->
<!--        readOnly: this.readOnly,-->
<!--      },-->
<!--    };-->
<!--  },-->
<!--  setup() {-->
<!--    const msg = ref('<h2>Hello World!</h2>');-->
<!--    return {-->
<!--      msg,-->
<!--    };-->
<!--  },-->
<!--  computed: {-->
<!--    styles() {-->
<!--      let style = {};-->
<!--      if (this.minHeight) {-->
<!--        style.minHeight = `${this.minHeight}px`;-->
<!--      }-->
<!--      if (this.height) {-->
<!--        style.height = `${this.height}px`;-->
<!--      }-->
<!--      return style;-->
<!--    },-->
<!--  },-->
<!--  watch: {-->
<!--    value: {-->
<!--      handler(val) {-->
<!--        if (val !== this.currentValue) {-->
<!--          this.currentValue = val === null ? "" : val;-->
<!--          if (this.Quill) {-->
<!--            this.Quill.pasteHTML(this.currentValue);-->
<!--          }-->
<!--        }-->
<!--      },-->
<!--      immediate: true,-->
<!--    },-->
<!--  },-->
<!--  mounted() {-->
<!--    this.init();-->
<!--  },-->
<!--  created() {-->
<!--    // 更多 UEditor 配置，参考 http://fex.baidu.com/ueditor/#start-config-->
<!--    this.editorConfig = {-->
<!--      UEDITOR_HOME_URL: '/src/assets/libs/UEditor/', // 访问 UEditor 静态资源的根路径，可参考常见问题1-->
<!--      serverUrl: '//ueditor.szcloudplus.com/cos', // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）-->
<!--    };-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    this.Quill = null;-->
<!--  },-->
<!--  methods: {-->
<!--    init() {-->
<!--      const editor = this.$refs.editor;-->
<!--      this.Quill = new Quill(editor, this.options);-->
<!--      // 如果设置了上传地址则自定义图片上传事件-->
<!--      if (this.type == 'url') {-->
<!--        let toolbar = this.Quill.getModule("toolbar");-->
<!--        toolbar.addHandler("image", (value) => {-->
<!--          this.uploadType = "image";-->
<!--          if (value) {-->
<!--            this.$refs.upload.$children[0].$refs.input.click();-->
<!--          } else {-->
<!--            this.quill.format("image", false);-->
<!--          }-->
<!--        });-->
<!--      }-->
<!--      this.Quill.pasteHTML(this.currentValue);-->
<!--      this.Quill.on("text-change", (delta, oldDelta, source) => {-->
<!--        const html = this.$refs.editor.children[0].innerHTML;-->
<!--        const text = this.Quill.getText();-->
<!--        const quill = this.Quill;-->
<!--        this.currentValue = html;-->
<!--        this.$emit("input", html);-->
<!--        this.$emit("on-change", {html, text, quill});-->
<!--      });-->
<!--      this.Quill.on("text-change", (delta, oldDelta, source) => {-->
<!--        this.$emit("on-text-change", delta, oldDelta, source);-->
<!--      });-->
<!--      this.Quill.on("selection-change", (range, oldRange, source) => {-->
<!--        this.$emit("on-selection-change", range, oldRange, source);-->
<!--      });-->
<!--      this.Quill.on("editor-change", (eventName, ...args) => {-->
<!--        this.$emit("on-editor-change", eventName, ...args);-->
<!--      });-->
<!--    },-->
<!--    // 上传前校检格式和大小-->
<!--    handleBeforeUpload(file) {-->
<!--      // 校检文件大小-->
<!--      if (this.fileSize) {-->
<!--        const isLt = file.size / 1024 / 1024 < this.fileSize;-->
<!--        if (!isLt) {-->
<!--          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);-->
<!--          return false;-->
<!--        }-->
<!--      }-->
<!--      return true;-->
<!--    },-->
<!--    handleUploadSuccess(res, file) {-->
<!--      // 获取富文本组件实例-->
<!--      let quill = this.Quill;-->
<!--      // 如果上传成功-->
<!--      if (res.code == 200) {-->
<!--        // 获取光标所在位置-->
<!--        let length = quill.getSelection().index;-->
<!--        // 插入图片  res.url为服务器返回的图片地址-->
<!--        quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);-->
<!--        // 调整光标到最后-->
<!--        quill.setSelection(length + 1);-->
<!--      } else {-->
<!--        this.$message.error("图片插入失败");-->
<!--      }-->
<!--    },-->
<!--    handleUploadError() {-->
<!--      this.$message.error("图片插入失败");-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style>-->
<!--</style>-->
